<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="head">
				<!--<div class="tab-panel clear">
					<p class="tab-item" @click="tab(1)" :class="searchData.circletype==1?'selected-item':''">统付</p>
					<p class="tab-item" @click="tab(2)" :class="searchData.circletype==2?'selected-item':''">个付</p>
				</div>-->
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">下单时间：</p>
							<div class="form-item-content" style="width: 200px;">
								<el-date-picker clearable style="width:200px;" v-model="value1" value-format="yyyy-MM-dd" type="daterange" @change="createTimeChange" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期">
								</el-date-picker>
							</div>
						</div>
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">套餐名称：</p>
							<div class="form-item-content">
								<el-select clearable v-model="searchData.comboid" placeholder="请选择">
									<el-option key="1" label="基础套餐" value="1"></el-option>
									<el-option key="2" label="标准套餐" value="2"></el-option>
									<el-option key="3" label="高级套餐" value="3"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">订单状态：</p>
							<div class="form-item-content">
								<el-select clearable v-model="searchData.orderstatus" placeholder="请选择">
									<el-option key="1" label="待支付" value="1"></el-option>
									<el-option key="2" label="已支付" value="2"></el-option>
									<el-option key="6" label="已取消" value="6"></el-option>
								</el-select>
							</div>
						</div>
	
					</div>
					<div class="clear">
						<div class="form-item left">
							<p class="form-item-title">查询：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.ordernum" placeholder="请输入关键字"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">号码查询：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.phone" placeholder="请输入号码"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<p class="form-item-title">集团名称：</p>
							<div class="form-item-content">
								<el-input clearable v-model="searchData.circlename" placeholder="请输入集团名称"></el-input>
							</div>
	
						</div>
						<div class="form-item left">
							<el-button type="primary" @click="search">查询</el-button>
						</div>
					</div>
				</div>
			</div>
			

			<template v-if="list.length">
				<div class="table-wrap">
					<el-table v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column width="100px" prop="ordernum" label="订单编号">
							<template slot-scope="scope">
								<el-popover placement="top-start" width="200" trigger="hover">
									<div class="text-left relative overflow-hidden">
										<p style="line-height: 24px;">{{scope.row.ordernum}}<el-button :data-clipboard-target="'#orderNumber' + scope.row.ordernum" v-clipboard size="mini" type="primary" style="margin-left:6px;">复制</el-button></p>
									</div>
									<div style="position: relative;" slot="reference">
										<p class="text-overflow-hidden">{{scope.row.ordernum}}</p>
										<input style="position: absolute;left: 0;top: 0;opacity: 0;z-index: -1;" readonly="" v-model="scope.row.ordernum" :id="'orderNumber'+scope.row.ordernum" type="text" />
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="numberCount" min-width="100" label="套餐类型">
							<template slot-scope="scope">
								<span>{{scope.row.smstype==1?'挂机短信文字版':'挂机短信视频版'}}</span>
							</template>	
						</el-table-column>
						<el-table-column prop="comboid" min-width="70" label="套餐名称">
							<template slot-scope="scope">
								<span>{{scope.row.comboid==1?'基础套餐':scope.row.comboid==2?'标准套餐':'高级套餐'}}</span>
							</template>	
						</el-table-column>
						<el-table-column label="集团名称">
							<template slot-scope="scope">
								<el-popover placement="top-start" width="240" trigger="hover" :content="scope.row.circlename">
									<p class="text-center">{{scope.row.circlename}}</p>
									<p slot="reference" class="text-overflow-hidden">{{scope.row.circlename}}</p>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="status" width="60" label="有效期" v-if="searchData.circletype==1">
							<template slot-scope="scope">
								<span>{{scope.row.openmonth}}个月</span>
							</template>
						</el-table-column>
						<el-table-column min-width="70" label="生效时间">
							<template slot-scope="scope">
								<span>{{scope.row.begintime==1?'当月':scope.row.begintime==2?'次月':'--'}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="70" label="订单总额">
							<template slot-scope="scope">
								<span>{{scope.row.orderfee/100}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="70" v-if="searchData.circletype==1" label="实际金额">
							<template slot-scope="scope">
								<span>{{scope.row.realfee/100}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="70" v-if="searchData.circletype==1" label="订单状态">
							<template slot-scope="scope">
								<span v-if="scope.row.orderstatus==1">待支付</span>
								<span v-if="scope.row.orderstatus==2">已支付</span>
								<span v-if="scope.row.orderstatus==6">已取消</span>
							</template>
						</el-table-column>
						<el-table-column prop="createtime" label="下单时间" min-width="120">
							<template slot-scope="scope">
								<span>{{scope.row.createtime}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="操作" fixed="right" width="110">
							<template slot-scope="scope">
								<div class="text-left">
									<span class="text-btn" @click="pay(scope.row)" v-if="searchData.circletype==1&&scope.row.orderstatus==1">支付</span>
									<el-popconfirm 
										v-if="searchData.circletype==1&&scope.row.orderstatus==1" 
										confirm-button-text='确定' 
										cancel-button-text='取消' 
										icon="el-icon-info" 
										icon-color="red" 
										@confirm="cancelOrder(scope.row.ordernum)"
										title="是否确定取消该订单？">
										<span slot="reference" class="text-btn">取消</span>
									</el-popconfirm>

									<span class="text-btn" @click="goOrderDetail(scope.row.ordernum)">查看</span>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" :current-page="this.searchData.pagenow" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>
		
		<el-dialog title="支付" :visible.sync="payConfirmVisible" width="700px" center>
			<div class="dialog-content" style="padding: 20px 10px;">
				<div class="form-item">
					<p class="form-item-title">集团名称：</p>
					<div class="form-item-content">
						{{obj.circlename}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐类型：</p>
					<div class="form-item-content">
						{{productNameList[obj.smstype-1]}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐：</p>
					<div class="form-item-content">
						{{productLevelList[obj.comboid-1]}}
						<fee-detail style="margin-left: 40px;" :smstype="obj.smstype"></fee-detail>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐详情：</p>
					<div class="form-item-content" style="width: auto;">
						<p class="para">
							<span style="margin-right: 14px;">电信</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.dxnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.dxfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.dxfee*obj.dxnum*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">移动</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.ydnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.ydfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.ydfee*obj.ydnum*obj.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">联通</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{obj.ltnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{obj.ltfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{obj.ltfee*obj.ltnum*obj.openmonth/100}}</font>元</span>
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">有效期：</p>
					<div class="form-item-content">
						{{obj.openmonth}}个月
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">生效开始时间：</p>
					<div class="form-item-content">
						{{obj.begintime==1?'当月':'次月'}}
					</div>
				</div>
				
				<div class="form-item">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<span class="money">{{obj.orderfee/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.discount">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<span class="orange">{{obj.discount/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.discount">
					<p class="form-item-title">实际支付：</p>
					<div class="form-item-content">
						<span class="money">{{(obj.orderfee-obj.discount<0?0:obj.orderfee-obj.discount)/100}}元</span>
					</div>
				</div>
				<p class="use-coupon" @click="selectCouponVisible=true">使用兑换券或抵用券</p>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="payConfirmVisible = false">取 消</el-button>
			    <el-button type="primary" @click="confirmPay">确 认</el-button>
			  </span>
		</el-dialog>
		
		<el-dialog top="30vh" :visible.sync="dialogVisible" width="700px" center>
			<div class="success-content">
				<img :src="success" class="success-icon" />
				<p class="success-text">订购成功</p>
				<p class="success-para">已完成下单操作，如需查看请前往订单管理查看订单详情。</p>
			</div>

			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="dialogVisible = false">确 认</el-button>
			  </span>
		</el-dialog>
		<coupon ref="coupon" style="z-index: 99999;" :show="selectCouponVisible" @closeCoupon="closeCoupon" @select="selectCoupon"></coupon>
		
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import Coupon from '@/components/Coupon'
	import FeeDetail from '@/components/FeeDetail'
	import {setCookie,deepClone} from '@/utils/common'
	import success from '@/assets/images/success.png'
	import clipboard from "@/directive/clipboard/clipboard.js";
	export default {
		name: 'GroupManage',
		directives: {
			clipboard: clipboard
		},
		components: {
			NoData,
			Coupon,
			FeeDetail,
		},
		data() {
			return {
				success,
				loading: false,
				payConfirmVisible:false,
				dialogVisible: false,
				selectCouponVisible:false,
				totalCount: 0,
				value1: '',
				value2: '',
				searchData: {
					pagenow:1,
					shownum:10,
					circletype: 1,
					ordernum:'',
					phone: '',
					starttime:'',
					endtime:'',
					orderstatus:'',
					comboid:'',
					circlename:'',
				},
				list: [],
				obj:{
					
				},
				productNameList: ['挂机短信（文字版）', '挂机短信（视频版）', '挂短+彩铃'],
				productLevelList: ['基础套餐', '标准套餐', '高级套餐'],
				selectedCoupon:{
					id:'',
					money:'',
				}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			tab(index) {
				if(this.searchData.circletype == index) {
					return
				}
				this.searchData.circletype = index
				this.search()
			},
			createTimeChange(val) {
				if(val) {
					this.searchData.starttime = val[0]
					this.searchData.endtime = val[1]
				} else {
					this.searchData.starttime = ''
					this.searchData.endtime = ''
				}
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow=1
				this.getData()
			},
			getData() {
				this.loading=true
				this.$request.queryOrderList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list=res.orderList
							this.totalCount=res.page.totalresult
						} else {
							console.log(res)
							this.msgError(res.msg)
						}
						this.loading=false
					})
			},
			cancelOrder(ordernum) {
				this.$request.cancelOrder({
					ordernum:ordernum,
					circletype:this.searchData.circletype
				}).then(res => {
						if(res.code == 0) {
							this.msgSuccess('操作成功')
							this.search()
						} else {
							this.msgError(res.msg)
						}
					})
			},
			goOrderDetail(ordernum) {
				setCookie('circletype',this.searchData.circletype)
				this.$router.push('/orderdetail/' + ordernum)
			},
			pay(obj) {
				this.obj=deepClone(obj)
				this.$refs.coupon.selectedIndex=0
				this.payConfirmVisible = true
			},
			confirmPay(){
				this.$request.pay({
					ordernum:this.obj.ordernum,
					orderuid:this.obj.orderuid,
					circlecommonuid:this.obj.circlecommonuid,
					ticketuid:this.obj.ticketuid,

				}).then(res => {
						if(res.code == 0) {
							this.payConfirmVisible = false
							this.dialogVisible=true
							this.search()
							this.$store.commit('setWaitPayCount')
						} else {
							this.msgError(res.msg)
						}
				})
			},
			selectCoupon(coupon){
				this.obj.discount=coupon.discount_ticket_price
				this.obj.ticketuid=coupon.discount_myticket_uid
			},
			closeCoupon(){
				this.selectCouponVisible=false
			}
		}
	}
</script>

<style scoped lang="scss">
.head{
	border-bottom: 10px solid #f5f5f5;
}
	.tab-panel {
		height: 62px;
		background: #fff;
		border-bottom: 2px solid #f5f5f5;
		.tab-item {
			width: 100px;
			height: 60px;
			text-align: center;
			float: left;
			margin-right: 20px;
			font-size: 16px;
			color: #333;
			cursor: pointer;
			line-height: 60px;
		}
		.selected-item {
			color: #0088EA;
			border-top: 2px solid #0088EA;
			line-height: 56px;
		}
	}
	
	.search-wrap {
		padding: 24px 30px 8px;
		background: #fff;
	}
	
	>>>.el-table {
		th {
			>.cell {
				padding-left: 6px;
				padding-right: 6px;
			}
		}
		td {
			>.cell {
				padding-left: 4px;
				padding-right: 4px;
				font-size: 12px;
			}
		}
	}

	.el-dialog__body{
		padding: 16px 16px 24px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 184px;
			padding: 12px 10px 0;
			.form-item{
				display: block;
				margin-right: 0;
				margin-bottom: 8px;
				.form-item-title{
					width: 130px;
					font-weight: bold;
				}
				.form-item-content{
					color: #333;
					.money{
						color: #F75124;
					    font-size: 16px;
					    font-weight: bold;
					}
				}
			}
			.use-coupon{
				text-align: center;
				color: #409EFF;
				text-decoration: underline;
				line-height: 32px;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.success-content {
			text-align: center;
			.success-icon {
				width: 70px;
				height: 70px;
				display: block;
				margin: 0 auto;
			}
			.success-text {
				font-size: 20px;
				font-weight: bold;
				color: #333333;
				line-height: 40px;
				margin-top: 4px;
			}
			.success-para {
				font-size: 16px;
				margin-top: 7px;
			}
		}
	}
</style>